<template>  
  <div class="navMenu">  
  <el-menu  
     default-active="0"  
     class="el-menu-vertical-demo"  
     background-color="#324157"  
     text-color="#C0CCDA"  
     active-text-color="#409EFF"
     unique-opened
     router>
    <!-- <label v-for="navMenu in navMenus">  
      <el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE'"  
                    :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" :route="navMenu.entity.value"  
                    disabled="">  
        <i :class="navMenu.entity.icon"></i>  
        <span slot="title">{{navMenu.entity.alias}}</span>  
      </el-menu-item>  
      
      <el-submenu v-if="navMenu.childs&&navMenu.entity&&navMenu.entity.state==='ENABLE'"  
                  :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name">  
        <template slot="title">  
          <i :class="navMenu.entity.icon"></i>  
          <span> {{navMenu.entity.alias}}</span>  
        </template>  
        <NavMenu :navMenus="navMenu.childs"></NavMenu>  
      </el-submenu>  
    </label>   -->
    <el-submenu v-for="(item,index) in $router.options.routes" :key="index" :index="item.path" v-if="!item.hidden">
        <template slot="title">
            <i :class="item.iconCls"></i>
            <span>{{item.name}}</span>
        </template>
       <el-menu-item  v-for="(child,index1) in item.children" :key="index1" :index="child.path" >{{child.name}}</el-menu-item>
       <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
    </el-submenu>
  </el-menu>
  </div>  
</template>  
  
<script scoped>
  export default {  
    name: 'NavMenu',  
    props: ['navMenus'],  
    data() {  
      return {}  
    },  
    methods:{

    }
  }  
</script>  
